<template>
  <div id="nav_bar">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      :collapse="$store.state.isCollapse"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="home" @click="clickItem('home')">
        <i class="el-icon-menu"></i>
        <span slot="title">导航一</span>
      </el-menu-item>

      <fragment v-for="(item, index) in navData" :key="index">
        <el-submenu :index="item.id" v-if="item.children">
          <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.authName }}</span>
          </template>
          <el-menu-item
            v-for="(ele, num) in item.children"
            :key="num"
            :index="ele.path"
            @click="clickItem(ele.path)"
            >{{ ele.authName }}</el-menu-item
          >
        </el-submenu>
        <el-menu-item v-else :index="item.path" @click="clickItem('last')">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.authName }}</span>
        </el-menu-item>
      </fragment>
    </el-menu>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeMenu: "home",
      navData: [],
    };
  },
  methods: {
    clickItem(item) {
      sessionStorage.setItem("activeMenu", item);
      this.$router.push({ path: "/" + item });
    },
  },
  created() {
    sessionStorage.getItem("activeMenu") &&
      (this.activeMenu = sessionStorage.getItem("activeMenu"));
      console.log(this.activeMenu);
    this.navData = this.$store.state.navData;
  },
};
</script>

<style lang='scss' scoped>
#nav_bar {
  height: 100%;
  .el-menu {
    height: 100%;
    .el-submenu {
      .el-menu-item {
        min-width: 100%;
      }
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 150px;
  min-height: 100vh;
}
</style>